<template style="margin: 0;padding: 0">
  <div class="common-layout" style="margin: 0;position: relative">
    <el-container>
<!--顶部下载客户端/书架...栏-->
      <el-header>
        <div>
          <el-row :gutter="10">
            <el-col :span="16" :offset="4" >
              <img src="bobo/shuqi.png" style="float: left;">
              <div style="float: right;margin-right:  50px;line-height: 55px">
                下载客户端&nbsp;|&nbsp;书架&nbsp;|&nbsp;登录&nbsp;|&nbsp;注册
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
<!--切换菜单和背景图-->
      <div style="background-image: url(http://localhost:9090/bobo/nav_title.png);height: 366px">
      <div style="margin:5px 0;" class="up" >
        <el-row :gutter="10">
          <el-col :span="13" :offset="4">
            <el-menu mode="horizontal" text-color="#fff" active-text-color="#ffd04b" style="text-underline: none;background-color: transparent">
              <el-menu-item style="font-size: 20px">首页</el-menu-item>
              <el-menu-item style="font-size: 20px">书库</el-menu-item>
              <el-menu-item style="font-size: 20px">达人中心</el-menu-item>
              <el-menu-item style="font-size: 20px">版权推荐</el-menu-item>
              <el-menu-item style="font-size: 20px">作家专区</el-menu-item>
              <el-menu-item style="font-size: 20px">筑金计划</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="3" >
              <input style="width: 150px;height: 40px;margin-top: 10px;background-color: #170E05"></input>
              <el-icon :size="40" style="vertical-align: middle" color="#fff" ><ZoomIn /></el-icon>
          </el-col>
        </el-row>
      </div>
  </div>
<!--main栏,内容都在该部分,第一部分是主编推荐,其余的也在下面-->
      <el-main>
        <!-- 主编推荐模块-->
       <el-row :gutter="10">
        <el-col :span="16" :offset="4">
          <div class="body_center" >
            <el-divider>
              <span style="font-size: 20px">主编推荐</span>
            </el-divider>
              <div class="zb" style="overflow: hidden;margin-top: 50px;">
<!--                  左侧部分-->
                  <div class="zb_left" style="display: inline-block;float: left;width:25%;margin-right:10px;background-color: #F8F3EA">
                      <div class="zb_left_up" style="margin-top:20px;height: 200px">
                        <el-carousel type="card" :interval="3000">
                          <el-carousel-item >
                            <img src="bobo/hfledxj.jpg" alt="">
                          </el-carousel-item>
                          <el-carousel-item>
                            <img src="bobo/wszz.jpg" alt="">
                          </el-carousel-item>
                          <el-carousel-item>
                            <img src="bobo/wylytl.jpg" alt="">
                          </el-carousel-item>
                        </el-carousel>
                      </div>

                    <div class="zb_left_down" style="margin-top:0;padding-left: 20px;padding-right: 20px ;margin-bottom: 0;">
                      <el-carousel  :interval="3050" style="height: 200px">
                        <el-carousel-item>
                            <span class="l_span2">侯府来了个表姑娘</span><br>
                            <span class="l_span2">姑苏羡</span><br>
                            <p class="left_p">长宁侯府来了个表姑娘，肤若凝脂，容色倾国，人人瞧她九天仙女一般的人物，又是最软的菩萨心肠与性情，只有王曦月自己最清楚，她不是。 十年一梦，一梦黄粱，她从没想过一觉睡醒会回到一切开始的地方。 从前她曲意逢迎，唯唯诺诺，从寄人篱下到被婆母嫌弃的新妇，嫁的是纨绔，过的是凄苦，王曦月过够了那样的日子，如今她要嫁最出色的郎君，做天下最有本事的娘子</p>
                            <span class="left_span" >腹黑</span>
                            <span class="left_span" >虐炸打脸</span>
                            <span class="left_span" >宅斗</span>

                        </el-carousel-item>
                        <el-carousel-item>
                          <span class="l_span2">万世至尊</span><br>
                          <span class="l_span2">化十</span><br>
                          <p class="left_p">记忆被封的少年获得荒古神书，以平庸之身，重新练就震世资质。一手遮天，万千神魔诛灭，一脚踏地，亿万生灵臣服……</p>
                          <span class="left_span" >扮猪吃虎</span>
                          <span class="left_span" >废柴</span>
                          <span class="left_span" >修士</span>
                        </el-carousel-item>
                        <el-carousel-item>
                          <span class="l_span2">被开除后我养了一条龙</span><br>
                          <span class="l_span2">龙腾青山</span><br>
                          <p class="left_p">新书发布《断绝关系后，娇妻跪求复合》，不同的故事，更加的精彩，书友们多多支持~ “土包子，滚回农村种田，我动动手指都能玩死你！” “这么大的人靠父母养活，还把家里吃穷了，是我都没脸活下去！” 女友被欺负，高考状元上门出头却被学校开除。怪病缠身，不得不回到农村老家。 直到有天神龙傍身，各界大佬纷纷捧着钞票上门……</p>
                          <span class="left_span" >神医</span>
                          <span class="left_span" >架空</span>
                          <span class="left_span" >都市</span>
                        </el-carousel-item>
                      </el-carousel>
                      <div style="margin-bottom: 50px">
                        <el-button type="danger" >立即阅读</el-button>
                      </div>
                    </div>
                  </div>
<!--                  中间部分-->
                  <div class="zb_mid" style="display: inline-block;float: left;width: 52%;margin-right:10px;font-size: 15px;">
                        <div class="zb_mid_up" style="overflow: hidden;">
                            <el-row :gutter="10">
                             <el-col :span="10" :offset="2" style="font-size: 12px">
                               <div class="zb_m_1" style="float: left;padding-left: 30px;width:250px;margin-top:10px;">
                                 <h3 style="text-align: left">[东方玄幻]龙神归来</h3>
                                 <h3 style="text-align: left">[宫斗宅斗]庶女成凰</h3>
                                 <h3 style="text-align: left">[两晋隋唐]穿越南唐：我是李仲宣争</h3>
                                 <h3 style="text-align: left">[穿越重生]福宝农家妻</h3>
                                 <h3 style="text-align: left">[都市婚恋]口红侠</h3>
                               </div>
                             </el-col>
                             <el-col :span="10" style="font-size: 12px">
                               <div class="zb_m_2" style="float: left;margin-left:30px;width:250px;margin-top:10px;">
                                 <h3 style="text-align: left">[东方玄幻]无上剑神</h3>
                                 <h3 style="text-align: left">[东方玄幻]太古龙尊</h3>
                                 <h3 style="text-align: left">[古典架空]唐宫奇案之血玉韘</h3>
                                 <h3 style="text-align: left">[都市婚恋]新养老时代</h3>
                                 <h3 style="text-align: left">[古典架空]如意算盘</h3>
                               </div>
                             </el-col>
                            </el-row>

                        </div>
                        <div class="zb_mid_down" style="margin-top: 50px">
                          <el-row :gutter="10">
                            <el-col :span="6" :offset="3">
                              <el-card style="padding: 0">
                                <img src="bobo/zb_m1.jpg" style="width:100%">
                                <div style="margin-bottom: 10px">
                                  <br>
                                  <span>奸臣之妻</span><br>
                                  <span>安年</span>
                                </div>
                              </el-card>
                            </el-col>
                            <el-col :span="6" >
                              <el-card style="padding: 0">
                                <img src="bobo/zb_m2.jpg" style="width:100%">
                                <div style="margin-bottom: 10px">
                                  <br>
                                  <span>鸳鸯谱</span><br>
                                  <span>杜想想</span>
                                </div>
                              </el-card>
                            </el-col>
                            <el-col :span="6" >
                              <el-card style="padding: 0">
                                <img src="bobo/zb_m3.jpg" style="width:100%">
                                <div style="margin-bottom: 10px">
                                  <br>
                                  <span>仙界多烦恼</span><br>
                                  <span>红摇</span>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                        </div>
                  </div>
<!--                  右侧区域-->
                  <div class="zb_right" style="display: inline-block;float: left;width: 20%;">
                        <div style="margin-top: 15px">
                          主编强推
                        </div>

                    <hr>
                    <!--   开始                 -->
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">1.福星高照：农门俏丫头</div>
                      </template>
                        <div class="in_left" style="float: left;">
                          <img src="bobo/inner1.jpg" alt="">
                        </div>
                        <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                          <br>
                          <span>浅兮媚颜</span>
                          <br>
                          <p>穿越到了这个叫大祁的年代，沈无衣唯一的想法是赚钱，供哥哥念书，出人头地。让爷爷下半辈子能享清福，拥有良田千亩。 但是哥哥这个同窗是从哪儿跑来的？</p>
                        </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">2.旺夫娘子</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner2.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>叶限</span>
                        <br>
                        <p>孙静姝天生好命，甫一出生爹爹便中了秀才，一家日子美滋滋，爹宠娘爱羡煞一条街姑娘。家道中落后在众人幸灾乐祸的目光中嫁给农户，七八姑八大姨嗑着瓜子看笑话，谁承想孙静姝嫁过去夫君赚钱了，二弟考上童生了，三妹口吃好了，公婆老毛病康复了，谢家摆脱烦人亲戚成首富啦！ 谢家娘子招摇回娘家轻怼众人，本夫人就是天生好命，出嫁之前好命女，出嫁之后旺夫命，不服憋着，嫉妒忍着！</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left;">3.首辅的团宠小娘子</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner3.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>妖朵</span>
                        <br>
                        <p>红颜薄命一朝重生抱得麒麟归，从此好运不断，吃饭免单，走路捡钱，一不小心还把自己混成了团宠，俊俏相公天天来撩我。 村民：“不好了房相公，你家娘子被野兽给吃了！” 房景毓：“没有的事，我家娘子早就回家了，还带回了一张虎皮。” 村民：“不好了房相公，你家娘子被官府的人给抓去坐牢了！” 房景毓：“没有的事，我家娘子已经被县令大人客客气气的给送回来了，正在家里嗑瓜子呢！</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">4.穿书七零：我有一栋百货大楼</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner4.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>金克丝的救赎</span>
                        <br>
                        <p>顶级厨师徐婉宁意外穿书，苦逼拿到恶毒女配剧本！还好她的生鲜超市跟着一起穿来了。从此徐婉宁疯狂做美食，勤勤恳恳发家致富，狂刷两萌娃和冰山男主的好感度，撕破原书女主的白莲花嘴脸，挽回她恶毒女配的凄惨命运。 冰山男主（好感度-250%）：“徐婉宁，你又在作什么妖！” 暖男男主（好感度520%）：“老婆，抱抱~” 某恶毒女配：“抱就抱，老实点！孩子在旁边看着呢！” 俩萌娃(◕ˇ∀ˇ◕)：“你们继续……</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">5.在仙尊梦里睡懒觉</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner5.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>青衫烟雨</span>
                        <br>
                        <p>连五灵根的废物都收，第一仙门已堕落至此？阮玉，你就算进了第一仙门，一辈子也只能当个打杂的。 ——被认为只能做一辈子杂役弟子的阮玉此刻正被掌门、长老们团团围住，嘘寒问暖。 大家都关心她吃得好不好，睡不睡得香，有没有做噩梦。 阮玉：噩梦没有，就是天天梦到同一个美男，差点儿害了相思病。 我靠睡觉成了仙门团宠，你敢信？</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">6.神医小奶团：八个大佬宠上天</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner6.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>天堂鸟</span>
                        <br>
                        <p>近百年没收过女弟子的天静宫终于迎来了一个女娃娃，八大长老摩拳擦掌要把她培养成天静宫最合格的继承人，可养着养着，却发现好像养歪了。自家的娃，养歪了也得宠着，那个啥啥国的太子，啥啥盟的少盟主，啥啥帮的少帮主，都竖起耳朵给我听清楚，我家宫主不出嫁，只招夫！</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">7.科技:为了上大学,上交可控核聚变</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner7.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>古藤</span>
                        <br>
                        <p>【科技爱国文】姜凡为了上龙科大，上交了可控核聚变部分公式及数据。结果整个龙国顶级专家为之震动……</p>
                      </div>
                    </el-popover>
                    <el-popover placement="bottom-start"  trigger="hover" :width="230" :height="200">
                      <template #reference>
                        <div style="margin-left: 20px;margin-bottom: 15px;text-align: left">8.圣祖</div>
                      </template>
                      <div class="in_left" style="float: left;">
                        <img src="bobo/inner8.jpg" alt="">
                      </div>
                      <div class="in_right" style="float: right;width:115px;margin-bottom: 0;">
                        <br>
                        <span>傲天无痕</span>
                        <br>
                        <p>这是一个全新升级的封神世界。 这里有纣王，姜子牙，苏妲己，杨戬都将是全新的定位， 这里有皇者，火云洞三皇； 这里有圣人，道门三清； 这里也有上古神魔，蚩尤，刑天； 这里将有一个名为罗烈的少年，开启一个“我非英雄，却也盖世无双”的新封神时代！</p>
                      </div>
                    </el-popover>
                    <!--结束                    -->
                    <div style="margin-bottom:20px;margin-top: 120px">
                      <img src="bobo/zb_r_bottom.jpg" alt="">
                    </div>
                  </div>
              </div>
          </div>
        </el-col>
       </el-row>


      </el-main>

<!--底部信息栏-->
      <el-footer style="background-color: #3D3D3D;width: 100%;height: 300px" class="fotter">
        <el-row :gutter="10" style="height: 300px">
          <el-col :span="16" :offset="4">
            <el-form style="color: #fff;">
              <el-form-item>
                <div style="width: 100%;padding-top:9px">
                  <div style="float: left">联系我们 |关于我们 |投稿声明 |常见问题 |网站微博 |自审制度</div>
                  <div style="float: right">©2015-2020 至远悦读（广州）文学信息技术有限公司 版权所有</div>
                </div>
              </el-form-item>
              <el-form-item>
                <span style="font-size: 13px" >阿里巴巴集团 |网银商行 |淘宝网 |天猫 |聚划算 |全球速卖通 |阿里巴巴国际交易市场 |1688 |阿里妈妈 |飞猪 |阿里云 |ALiOS |高德 |UC |友盟 |虾米 |大麦网 |优酷 |钉钉 |支付宝 |阿里影业 |阿里健康 |阿里体育|</span>
              </el-form-item>
              <el-form-item>
                <div style="font-size: 13px">
                  网络文化经营许可证 粤网文[2023]1543-112号 粤ICP备13078413号
                  <img src="bobo/footer3.png" style="height: 25px" class="f_img">
                  粤公网安备44010602000197号 增值电信业务许可证 粤B2-20240136 出版物经营许可证 新出发穗批字第4401100762号
                </div>
              </el-form-item>
              <el-form-item>
                <div >
                  营业执照
                  <img src="bobo/footer4-1.png" style="height: 25px" class="f_img">
                  <img src="bobo/footer4-2.png" style="height: 25px" class="f_img">
                  违法和不良信息举报 0571-26883636 kefu@idc.ucweb.com| 网络内容从业人员违法违规行为专项举报
                </div>
              </el-form-item>
              <el-form-item>
                <div style="width: 100%;">
                  <div style="float: left">请使用者仔细阅读书旗《书旗用户服务协议》、《隐私保护政策》说明</div>
                  <div style="float: right">地址：广州市天河区高普路38号620房（仅限办公） 电话：0571-26883636</div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="width: 100%;">
                  <div style="float: left">为保证更好的浏览效果，请使用Chrome或其他主流浏览器访问</div>
                  <div style="float: right">本站部分作品的封面设计图系由作者自行上传，本站未进行任何人工编辑整理。若有侵犯您的知识产权，请及时通知</div>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>

</script>

<style scoped>
.f_img{
  vertical-align: middle;
}
.body_center>.zb>.zb_left img{
  width: 100px;
}
.body_center>.zb>.zb_left>.zb_left_down .left_span{
  margin-right: 20px;
  border: 1px solid black;
}
.body_center>.zb>.zb_left>.zb_left_down .l_span2{
  margin-left: 0;
}
.m-2{
  text-align: left;
  width: 100%;
}
.in_left img{
  width: 82px;
}
.in_right p{
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
}
.left_p{
  font-size: 15px;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
}
a{
  text-underline: none;
}
</style>